<template>
  <a-modal
    v-model="dialogVisible"
    :title="title"
    :confirm-loading="confirmLoading"
    :width="1200"
    :mask-closable="false"
    :body-style="{
      maxHeight: '600px',
      overflowY: 'auto'
    }"
    @ok="validateSubmit"
  >
    <div class="app-rule-form-container">
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-form-model-item label="门店名称" prop="title">
          <a-input
            v-model="ruleForm.title"
            placeholder=""
            style="width:272px"
          />
          <span class="margin-left-15">建议20个字以内</span>
        </a-form-model-item>
        <a-form-model-item label="门店logo" prop="logo_url">
          <GallerySelector v-model="ruleForm.logo_url"></GallerySelector>
        </a-form-model-item>
        <a-form-model-item label="门店客服" prop="mobile">
          <a-input
            v-model="ruleForm.mobile"
            placeholder=""
            style="width:270px"
          />
          <span class="margin-left-15">
            此电话将于面客时使用，如网店展示、客户提醒短信展示等
          </span>
        </a-form-model-item>
        <a-form-model-item label="门店简介" prop="description">
          <a-textarea
            v-model="ruleForm.description"
            placeholder="介绍一下你的店铺吧，微信分享给好友时会显示这里的文案"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>
<script>
import clonedeep from 'lodash.clonedeep'
import rules from './rules'
export default {
  name: 'RuleFormDialog',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 是否是编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 详情数据
    detailData: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      confirmLoading: false,
      // 表单
      ruleForm: {
        image: [],
        business_begin_time: '09:20',
        business_end_time: '18:00'
      },
      // 验证
      rules: {
        ...rules
      }
    }
  },
  computed: {
    title() {
      if (this.isEdit) {
        return '编辑门店'
      } else {
        return '添加门店'
      }
    },
    dialogVisible: {
      get: function() {
        return this.visible
      },
      set: function(newValue) {
        this.$emit('update:visible', newValue)
      }
    }
  },
  mounted() {
    // console.log(this)
    if (this.isEdit) {
      this.ruleForm = Object.assign(
        {},
        this.ruleForm,
        clonedeep(this.detailData)
      )
    }
  },
  methods: {
    validateSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提交表单
    async submit() {
      const ruleForm = clonedeep(this.ruleForm)
      this.confirmLoading = true
      if (this.isEdit) {
        // 修改
        const res = await this.$api.store.editStore(ruleForm)
        if (res.code === 1) {
          this.dialogVisible = false
          this.$notification.success({
            message: res.msg,
            duration: 1
          })
          this.$emit('success')
        }
      } else {
        // 增加
        const res = await this.$api.store.addStore(ruleForm)
        if (res.code === 1) {
          this.dialogVisible = false
          this.$notification.success({
            message: res.msg,
            duration: 1
          })
          this.$emit('success')
        }
      }
      this.confirmLoading = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.rule-form-contain {
  padding: 15px 20px 0 0;
}
</style>
